import React from 'react';
import { withRouter } from "react-router-dom";
import { connect } from 'react-redux';
import { ListView, Grid, Toast } from 'antd-mobile';
import { imgInter } from '../../data/Interface';
import pxPage from '../../root/pxPage';
import Position from '../Home/Position';
import Mytab from '../Mytab'
import { Delcomment, Deldynamic, getMsg } from '../../redux/actionCreator'
import './dynaic.css'
// import { Toast, WhiteSpace, WingBlank, Button } from 'antd-mobile';
import { getcommlist_dynamic, send_comment_dynamic } from '../../redux/actionCreator';


import { Modal, Button, WhiteSpace, WingBlank } from 'antd-mobile';
import { addDyCommReport, addmainreport } from '../../redux/actionCreator/report';

const alert = Modal.alert;
const operation = Modal.operation;
const prompt = Modal.prompt;



const NUM_ROWS = 20;
let pageIndex = 0;
function genData(pIndex = 0) {
    const dataBlob = {};
    for (let i = 0; i < NUM_ROWS; i++) {
        const ii = (pIndex * NUM_ROWS) + i;
        dataBlob[`${ii}`] = `row - ${ii}`;
    }
    return dataBlob;
}

class Dynamicdateil extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            commenttext: '',
            obj: JSON.parse(localStorage.getItem('dynaicdateil')),
            flag: 0
        };
        this.props.dispatch(getcommlist_dynamic(this.state.obj.dynamic_id))
    }

    formatDate = (now) => {
        let year = now.getFullYear();  //取得4位数的年份
        let month = now.getMonth() + 1;  //取得日期中的月份，其中0表示1月，11表示12月
        let date = now.getDate() < 10 ? '0' + now.getDate() : now.getDate();      //返回日期月份中的天数（1到31）
        let hour = now.getHours() < 10 ? '0' + now.getHours() : now.getHours();     //返回日期中的小时数（0到23）
        let minute = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes(); //返回日期中的分钟数（0到59）
        let second = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds(); //返回日期中的秒数（0到59）
        return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
    }

    //加键盘回车发送消息的事件
    componentDidMount() {
        document.addEventListener("keydown", this.handleEnterKey);
    }

    componentWillUmount() {
        document.removeEventListener("keydown", this.handleEenterKey);
    }

    handleEnterKey = (e) => {
        if (e.keyCode === 13) {
            if (this.state.commenttext != '') {
                this.props.dispatch(send_comment_dynamic(JSON.parse(localStorage.getItem('dynaicdateil')).dynamic_id, JSON.parse(localStorage.getItem('user')).user_id, this.state.commenttext, this.formatDate(new Date())))
                Toast.success('发送评论成功！', 1)
                this.setState({ commenttext: '', flag: 0 })
                console.log(this.state.commenttext)
            } else {
                Toast.fail('没有评论内容哦！', 1);
            }
        }
    }
    Del = (obj) => {
        return <i
            // 这里写点击举报
            style={{ fontSize: '1.6em', position: 'absolute', right: '3em' }}
            className="iconfont icon-del"

            onClick={() => alert('确认删除？', 'defaultValue for prompt', [
                { text: '取消', onPress: () => { console.log('点击了取消') } },
                {
                    text: '确认', onPress: value => {
                        Deldynamic(obj.dynamic_id)
                        console.log(`输入的内容:${value}`)
                        Toast.success('删除成功！', 1)
                    }
                },
            ], 'default', '')}
        ></i>
    }

    Delcomm = (item) => {
        return <i
            // 这里写点击举报
           style={{ color: '#99555F' }}
            className="iconfont icon-del"

            onClick={() => alert('确认删除？', 'defaultValue for prompt', [
                { text: '取消', onPress: () => { console.log('点击了取消') } },
                {
                    text: '确认', onPress: value => {
                        this.props.dispatch(Delcomment(item.comment_id))
                        console.log(`输入的内容:${value}`)
                        Toast.success('删除成功！', 1)
                    }
                },
            ], 'default', '')}
        ></i>
    }
    render() {
        const obj = this.state.obj

        return (
            <div style={{ minHeight: '100vh', display: 'flex' }}>
                <div style={{ backgroundColor: "#080904", minHeight: '100vh', display: 'flex', width: '100%' }}>
                    {/* <Position /> */}
                    <div className='mylist' style={{ width: '100%', margin: '0 auto', color: 'black' }}>
                        <div style={{ backgroundColor: '#33273D', height: '4.5em' }}>
                            <div style={{ height: '20px' }}></div>
                            <i className="iconfont icon-fanhui" style={{ fontSize: '1.7em', marginLeft: '5%' }} onClick={() => this.props.history.goBack()}></i>
                            {
                                obj.user_id == getMsg(this.props).user_id
                                    ? this.Del(obj)
                                    : console.log('不是该用户')
                            }
                            <i
                                // 这里写点击举报
                                style={{ fontSize: '1.6em', position: 'absolute', right: '1em' }}
                                className="iconfont icon-xinfangjubao"

                                onClick={() => prompt('举报原因', 'defaultValue for prompt', [
                                    { text: '取消', onPress: () => { console.log('点击了取消') } },
                                    {
                                        text: '确认', onPress: value => {
                                            this.props.dispatch(addmainreport(JSON.parse(localStorage.getItem('dynaicdateil')).dynamic_id, JSON.parse(localStorage.getItem('user')).user_id, value))
                                            console.log(`输入的内容:${value}`)
                                            Toast.success('举报成功！', 1)
                                        }
                                    },
                                ], 'default', '')}
                            ></i>

                        </div>
                        <div style={{ width: '90%', margin: '0 auto' }}></div>
                        <div
                            className='dynamicdateil'
                            style={{ position: 'relative' }}
                        >
                            <img src={imgInter + obj.user_pic} style={contextimg} ></img>
                            <div style={rowitem}>
                                <div className='content-div-user' style={contentdivuser}>{obj.user_name}</div>
                                <div className='content-div-context' style={contentdivcontext}>{obj.dynamic.dynamic_context}</div>
                                <Grid
                                    data={obj.dynamic_pic}
                                    columnNum={3}
                                    itemStyle={itemStyl}
                                    activeStyle={false}
                                    hasLine={false}
                                    renderItem={dataItem => (
                                        <img style={itemStyl} src={imgInter + dataItem.dynamic_pic_url}
                                            onClick={() => {
                                                this.props.history.push('/imageshow')
                                                localStorage.setItem('imgdata', JSON.stringify(dataItem.dynamic_pic_url))
                                            }}
                                        ></img>
                                    )}
                                />
                                <div className='context-time' style={contexttime}>{obj.dynamic.dynamic_time}</div>
                                <div>
                                    <textarea
                                        onChange={(e) => {
                                            this.setState({ commenttext: e.target.value })
                                        }}
                                        // onChange={(e) =>this.setState({ commenttext=e.target.value }) }
                                        placeholder={"评论内容"}
                                        style={{ lineHeight: '2em', borderRadius: '5px', width: `${pxPage(220)}px`, backgroundColor: '#333', border: '1px solid #aaa', height: `${pxPage(30)}px`, marginTop: '10px', padding: '0.3em', display: 'inline' }}
                                        type="text"
                                        value={this.state.commenttext}
                                    >

                                    </textarea>
                                    <i
                                        onClick={() => {
                                            if (this.state.commenttext != '') {
                                                this.props.dispatch(send_comment_dynamic(JSON.parse(localStorage.getItem('dynaicdateil')).dynamic_id, JSON.parse(localStorage.getItem('user')).user_id, this.state.commenttext, this.formatDate(new Date())))
                                                Toast.success('发送评论成功！', 1)
                                                this.setState({ commenttext: '', flag: 0 })
                                                console.log(this.state.commenttext)
                                            } else {
                                                Toast.fail('没有评论内容哦！', 1);
                                            }

                                        }}
                                        style={{
                                            lineHeight: '2em', marginRight: `${pxPage(15)}px`, color: '#888', fontSize: '1.8em', position: 'relative', bottom: `${pxPage(10)}px`, left: `${pxPage(5)}px`
                                        }}
                                        className="iconfont icon-duigou"></i>

                                </div>

                            </div>
                            <div className='' style={{ backgroundColor: 'black' }}>
                                {
                                    this.props.comment.map((item, index) => {
                                        return <li key={index} style={li}>
                                            <img src={imgInter + item.user_pic} style={liimg}></img>
                                            <div style={divnametime}>
                                                <span style={{ marginRight: '10px', color: '#35993D' }}>{item.user_name}</span>
                                                <span style={{ color: '#807E5F', marginRight: `10px` }}>{item.time}</span>
                                                <i
                                                    // 这里写点击举报
                                                    onClick={() => prompt('举报原因', 'defaultValue for prompt', [
                                                        { text: '取消', onPress: () => { console.log('点击了取消') } },
                                                        {
                                                            text: '确认', onPress: value => {
                                                                this.props.dispatch(addDyCommReport(JSON.parse(localStorage.getItem('user')).user_id, value, item.comment_id))
                                                                console.log(`输入的内容:${value}`)
                                                                Toast.success('举报成功！', 1)
                                                            }
                                                        },
                                                    ], 'default', '')}
                                                    className="iconfont icon-jubao2"
                                                    style={{ color: '#99555F' }}></i>
                                                {
                                                    // console.log(item)
                                                    item.user_id == getMsg(this.props).user_id
                                                        ? this.Delcomm(item)
                                                        : console.log('不是你的评论')
                                                }
                                            </div>
                                            <div style={commtext}>{item.comment_context}</div>

                                        </li>
                                    })
                                }
                            </div>
                            <div style={{ height: '6em' }}></div>
                        </div>
                    </div>
                    <Mytab />
                </div>
                <div style={{ flex: '1' }}></div>
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    return {
        shop: state.shop,
        business: state.business,
        login: state.login,
        dynamic: state.dynamic,
        comment: state.comment
    }
}

export default withRouter(connect(mapStateToProps)(Dynamicdateil))

//style
const contentdivuser = {
    width: '100%',
    height: pxPage(15),
    fontSize: pxPage(14),
    color: 'rgb(0,204,255)',
    fontWeight: 'bolder',
    paddingTop: pxPage(10)
}

const contentdivcontext = {
    fontSize: pxPage(15),
    width: '100%',
    color: 'white',
    wordWrap: 'break-word',
    paddingTop: pxPage(10),
    paddingBottom: pxPage(10)
}

const rowitem = {
    margin: '0 auto',
    width: pxPage(280),
    padding: `0px ${pxPage(15)}px 0px ${pxPage(63)}px`,
    color: 'black',
    position: 'relative',
    top: pxPage(20),
    backgroundColor: '#080904'
}
const itemStyl = {
    width: pxPage(90),
    height: pxPage(90),
    padding: '0px',
    bolder: '2px solid gray',
    backgroundColor: 'black',
    objectFit: 'cover'
}
const contexttime = {
    color: 'gray',
    paddingTop: pxPage(20),
}
const contextimg = {
    width: pxPage(45),
    height: pxPage(45),
    position: 'absolute',
    top: pxPage(15),
    left: pxPage(18),
    borderRadius: '50%',
    border: '1px solid',
    zIndex: 2,
    objectFit: 'cover'
}

const li = {
    width: pxPage(375),
    height: pxPage(50),
    position: 'relative',
    top: pxPage(30),
}
const liimg = {
    width: pxPage(25),
    height: pxPage(25),
    position: 'absolute',
    top: pxPage(5),
    left: pxPage(35),
    borderRadius: '50%',
    border: '1px solid #fff'
}
const divnametime = {
    position: 'absolute',
    top: pxPage(5),
    left: pxPage(70),
    fontSize: pxPage(14),
    color: 'gray'
}
const commtext = {
    position: 'absolute',
    bottom: pxPage(5),
    left: pxPage(70),
    fontSize: pxPage(16),
}